<template>
  <div class="logistics-page">
    <el-card class="logistics-card">
      <div class="logistics-header">
        <h2>物流跟踪</h2>
        <div class="order-info">
          <p>订单号：{{ displayOrderNo }}</p>
          <p>物流公司：顺丰速运</p>
          <p>物流单号：SF1234567890</p>
          <p class="demo-tip" v-if="!orderNo">（示例数据）</p>
        </div>
      </div>

      <el-timeline>
        <el-timeline-item
          v-for="(item, index) in logisticsData"
          :key="index"
          :timestamp="item.time"
          :type="index === 0 ? 'primary' : ''"
        >
          {{ item.content }}
        </el-timeline-item>
      </el-timeline>
    </el-card>
  </div>
</template>

<script>
export default {
  name: 'Logistics',
  data() {
    return {
      orderNo: '',
      logisticsData: [
        {
          time: '2024-03-20 18:30',
          content: '【广州市】已签收，签收人是门卫小哥，如有疑问请电联快递员小王，电话：12345678900'
        },
        {
          time: '2024-03-20 14:20',
          content: '【广州市】快件已到达【广州天河区公司】，快递员小王（12345678900）正在派送，请保持电话畅通'
        },
        {
          time: '2024-03-20 11:35',
          content: '【广州市】快件离开【广州转运中心】，下一站【广州天河区公司】'
        },
        {
          time: '2024-03-19 20:15',
          content: '【广州市】快件已到达【广州转运中心】'
        },
        {
          time: '2024-03-19 16:40',
          content: '【昆明市】快件离开【昆明集散中心】，发往【广州市】'
        },
        {
          time: '2024-03-19 15:20',
          content: '【昆明市】快件已到达【昆明集散中心】'
        },
        {
          time: '2024-03-19 14:00',
          content: '【昆明市】【昆明呈贡区公司】已揽收，揽收员：张三（12345678901）'
        },
        {
          time: '2024-03-19 10:30',
          content: '卖家已发货'
        }
      ]
    }
  },
  computed: {
    displayOrderNo() {
      return this.orderNo || 'SF1234567890'
    }
  },
  created() {
    // 从路由参数中获取订单号
    const { orderNo } = this.$route.params
    if (orderNo) {
      this.orderNo = orderNo
    }
  },
  // 监听路由参数变化
  watch: {
    '$route.params.orderNo': {
      handler(newOrderNo) {
        this.orderNo = newOrderNo || ''
      },
      immediate: true
    }
  }
}
</script>

<style scoped>
.logistics-page {
  padding: 20px;
  background-color: #f5f7fa;
  min-height: calc(100vh - 40px);
}

.logistics-card {
  max-width: 800px;
  margin: 0 auto;
  border-radius: 8px;
}

.logistics-header {
  margin-bottom: 30px;
  border-bottom: 1px solid #ebeef5;
  padding-bottom: 20px;
}

.logistics-header h2 {
  margin: 0 0 20px 0;
  color: #303133;
  font-size: 24px;
}

.order-info {
  color: #606266;
}

.order-info p {
  margin: 8px 0;
  font-size: 14px;
}

.demo-tip {
  color: #E6A23C;
  font-size: 12px;
  margin-top: 10px;
}

.el-timeline {
  padding: 20px 0;
}

.el-timeline-item {
  padding-bottom: 20px;
}

.el-timeline-item:last-child {
  padding-bottom: 0;
}

.el-timeline-item__timestamp {
  font-size: 13px !important;
}

.el-timeline-item__content {
  color: #303133;
  font-size: 14px;
  line-height: 1.6;
}

.el-timeline-item.is-primary .el-timeline-item__node {
  background-color: #409EFF;
}

.el-timeline-item.is-primary .el-timeline-item__timestamp {
  color: #409EFF;
}
</style> 